$(function () {
    // 1获取统计数据 /admin/data/info
    function getDataInfo() {
        $.get('/admin/data/info', null, function (resData) {
            // console.log(res)
            let data = resData
            /* dayArticle: 17
            dayComment: 36
            totalArticle: 227
            totalComment: 7998
            */
            $('.totalCount em').text(data.totalArticle)
            $('.totalCount_day em').html(data.dayArticle)
            $('.commentCount em').html(data.totalComment)
            $('.commentCount_day em').html(data.dayComment)
        })
    }
    // 2 // 获取日新增文章数据并渲染echars折线图
    function getNewArticleChars() {
        $.get('/admin/data/article', null, function (resData) {
            // console.log(resData)
            let data = resData.date
            // const dayChars = echarts.init($(('#day_article_show')[0]))
            const dayChars = echarts.init($('#day_article_show')[0])
            const option = {
                //2.0.1 设置echars顶部标题
                title: {
                    text: '日新增文章趋势', // 标题文字
                    left: 'center' //让标题居中
                },
                series: [{
                    name: '日增长数值',
                    type: 'line', // line类型必须设置xAxis,yAxis
                    smooth: true, // 开启折线的平滑处理
                    data: data.map(item => item.count),
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    // 2.0.6 设置区域样式
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#ffffff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }],
                xAxis: {
                    name: '日期',
                    type: 'category',
                    boundaryGap: false,
                    data: data.map(item => item.date)
                },
                yAxis: {
                    name: '数量',
                    type: 'value'
                },
                // 2.0.4 设置鼠标放到轴上即显示数据详情
                tooltip: {
                    trigger: 'axis'
                },   // 2.0.5 设置工具栏
                toolbox: {
                    show: true, //显示工具栏
                    feature: {
                        dataZoom: { //设置缩放
                            yAxisIndex: 'none' // 限制y轴缩放，只能X轴缩放
                        },
                        dataView: { readOnly: false }, // 允许编辑原始数据
                        magicType: { type: ['line', 'bar'] }, // 设置图表可以从line(折现图)和bar(柱状图)之前来回切换
                        restore: {},  // 设置重置数据
                        saveAsImage: {} // 设置保存图片
                    }
                }

            };

            // 使用刚指定的配置项和数据显示图表。
            dayChars.setOption(option);
        })
    }
    // 3日新增文章数量统计 /admin/data/category
    function getPieShow() {
        $.get('/admin/data/category', null, function (resData) {
            // console.log(resData)
            let data = resData.date
            const dayChars = echarts.init($('#pie_show')[0])
            const options = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // 设置图例
                legend: {
                    orient: 'horizontal', // 图例为水平方向
                    left: 10,
                    data: data.map(item => item.name)  // 图例的数据
                },
                // 调环装颜色
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [
                    {
                        name: '分类数量',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        //  data只接受name和value属性名称的对象数组
                        data: data.map(item => ({ "name": item.name, "value": item.articles }))
                    }
                ]
            };
            dayChars.setOption(options);

        })
    }
    // 日文章访问量 /admin/data/visit
    function getColumnShow() {
        $.get('/admin/data/article', null, function (resData) {
            // console.log(resData)
            let data = resData.date
            const dayChars = echarts.init($('#column_show')[0])
            const options = {
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.date)
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: '#5885e8',
                series: [{
                    data: data.map(item => item.count),
                    type: 'bar',
                    showBackground: true,
                    barWidth: 25, // 设置柱子的宽度
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            }
            // 使用刚指定的配置项和数据显示图表。
            dayChars.setOption(options);
        })
    }
    getDataInfo()
    getNewArticleChars()
    getPieShow()
    getColumnShow()
})